import { Input } from "antd";
import { useComponentsStore } from "../../../stores/components";
import { ComponentEvent } from "../../../stores/component-config";
import { useEffect, useState } from "react";

export interface GoToLinkConfig {
    type: 'goToLink'
    url: string
}

export interface GoToLinkProps {
    value?: string
    defaultValue?: string
    onChange?: (config: GoToLinkConfig) => void
}

export const GoToLink = (props: GoToLinkProps) =>{
    const { defaultValue, onChange, value: val } = props;

    const { curComponentId, curComponent, updateComponentProps } = useComponentsStore();
    const [value, setValue] = useState<string>(defaultValue||'');

    const urlChange = (value: string) => {
        if(!curComponentId) return;
        // 要注意同名eventName覆盖，所以要做对象合并

        setValue(value);
        onChange?.({
            type: 'goToLink',
            url: value
        })

        /* updateComponentProps(curComponentId, {
            [eventName]: {
                ...curComponent?.props?.[eventName],
                url: value
            }
        }) */
    }

    useEffect(()=>{
        setValue(val||'')
    },[val])
    

    return (
        <div className="mt-[10px]">
            <div className="flex items-center gap-[10px]">
                <div>链接</div>
                <Input value={ value } onChange={(e)=>{ urlChange(e.target.value) }} />
            </div>
        </div>
    )
}